import { ListView } from 'antd-mobile';
import React, { Component } from 'react'
import styles from './index.less'
import ReactDOM from 'react-dom'
import favorites from '../../assets/icon/favorites.png'
import hFavorites from '../../assets/icon/hFavorites.png'

const data = [

  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: '探索未来的电动自行车：9个趋势',
    date: '2020.12.28',
    isFavorites: 1,
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: '星恒举办2021年中国电动车锂电伙伴大会暨星恒品牌战略发布会星恒举办2021年中国电动车锂电伙伴大会暨星恒品牌战略发布会',
    date: '2020.12.28',
    isFavorites: 1,
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: '共享是拥有的新形式，同样适用于电动自行车和自行车',
    date: '2020.12.28',
    isFavorites: 0,
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: '研究表明，年轻人骑行可以抵抗疫情',
    date: '2020.12.28',
    isFavorites: 0,
  },

];

function MyBody(props) {
  return (
    <div className={`am-list-body ${styles.myBody}`} style={{ background: '#f3f3f3' }}>
      {props.children}
    </div>
  );
}

const NUM_ROWS = 4;
let pageIndex = 0;

function genData(pIndex = 0) {
  const dataBlob = {};
  for (let i = 0; i < NUM_ROWS; i++) {
    const ii = (pIndex * NUM_ROWS) + i;
    dataBlob[`${ii}`] = `row - ${ii}`;
  }
  return dataBlob;
}

export default class Demo extends React.Component {
  constructor(props) {
    super(props);
    const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
    const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
    const dataSource = new ListView.DataSource({
      getRowData,
      getSectionHeaderData: getSectionData,
      rowHasChanged: (row1, row2) => row1 !== row2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    });

    this.state = {
      dataSource,
      isLoading: true,
      height: document.documentElement.clientHeight * 3 / 4,
    };
  }

  componentDidMount() {
    const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
    this.rData = genData();
    this.setState({
      dataSource: this.state.dataSource.cloneWithRowsAndSections(this.rData),
      isLoading: false,
      height: hei,
    });
  }


  onEndReached = (event) => {
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    // console.log('reach end', event);
    this.setState({ isLoading: true });
  }

  render() {

    const { dataSource } = this.state
    let index = 0;
   
    const row = (rowData, sectionID, rowID) => {
      // console.log(rowData, 'rrrrr')
      if (index < data.length) {
        index = data.length - 1;
      }
      const obj = data[index--];
      return (
        <div key={rowID} className={styles.itemCard}>
          <div className={styles.content}>
            <img src={obj.img} alt="" />
            <div>
              <span className={styles.title} style={{ WebkitBoxOrient: "vertical", MozBoxOrient: 'vertical' }}>{obj.title}</span>
              <div className={styles.date}><span>{obj.date}</span> <img src={obj.isFavorites == 1 ? hFavorites : favorites} alt="isHot"></img></div>
            </div>
          </div>
        </div>
      );
    };
    // console.log(dataSource, 'dataSource')
    
    return (
      <div className={styles.page}>
        <ListView
          ref={el => this.lv = el}
          dataSource={this.state.dataSource}
          renderRow={row}
          style={{
            height: this.state.height,
            backgroundColor: "#f3f3f3",
            overflow: 'auto',
          }}
          renderBodyComponent={() => <MyBody />}
          pageSize={4}
          onScroll={() => { console.log('scroll'); }}
          scrollRenderAheadDistance={500}
          onEndReached={this.onEndReached}
          onEndReachedThreshold={10}
        />
      </div>

    );
  }
}